<template>
	<view>
		<view-head Title="血氧饱和度" :isShowR="true" @saveBack="saveBack"></view-head>
		<view class="view-content">
			<view class="time-box _df _jb _ac" @click="show=true">
				<view class="name">
					测量时间
				</view>
				<view class="time">
					2024年08月01日 14:57<u-icon name="arrow-right" class="ml15" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="subTitle">
				血压（必填）
			</view>
			<view class="list">
				<view class="item">
					<view class="title">
						收缩压（高压）
					</view>
					<view class="input-box _df _jb _ac">
						<u-input v-model="value" placeholder="请输入" :clearable="false" type="text" :border="false" />
						<view class="dw">
							mmHg
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						舒张压（低压）
					</view>
					<view class="input-box _df _jb _ac">
						<u-input v-model="value2" placeholder="请输入" :clearable="false" type="text" :border="false" />
						<view class="dw">
							mmHg
						</view>
					</view>
				</view>
			</view>
			<view class="subTitle">
				脉搏（选填）
			</view>
			<view class="list">
				<view class="item">
					<view class="title">
						脉搏
					</view>
					<view class="input-box _df _jb _ac">
						<u-input v-model="value3" placeholder="请输入" :clearable="false" type="text" :border="false" />
						<view class="dw">
							次/分
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar active-bg-color="#FF4651" v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				value2:'',
				value3:'',
				show:false,
				mode:'date'
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			saveBack(){
				
			},
			change(e){
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary{
		background-color: #FF4651;
		border-color: #FF4651;
	}
.view-content{
	padding: 0 50rpx 80rpx;
	.time-box{
		margin-bottom: 60rpx;
		.name{
			font-size: 34rpx;
			font-family: $uni-font-family-Bold;
			color: #000;
		}
		.time{
			font-size: 28rpx;
			font-family: $uni-font-family-Medium;
			color: #aaa;
		}
	}
	.subTitle{
		font-size: 24rpx;
		font-family: $uni-font-family-Medium;
		color: #888;
		margin-bottom: 24rpx;
	}
	.list{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 20rpx;
		margin-bottom: 40rpx;
		.item{
			height: 220rpx;
			background: #f5f5f5;
			border-radius: 30rpx;
			padding: 50rpx 50rpx 0 40rpx;
			.title{
				font-size: 24rpx;
				font-family: $uni-font-family-Medium;
				color: #888;
				margin-bottom: 30rpx;
			}
			.dw{
				font-size: 30rpx;
				font-family: $uni-font-family-Medium;
				color: #111;
				margin-left: 10rpx;
			}
			/deep/.uni-input-input{
				font-size: 60rpx;
				font-family: $uni-font-family-Bold;
				color: #000;
			}
		}
	}
}
</style>
